<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-03-23 14:34:22
 * @Descripttion: 
 -->
 <div nz-row nzGutter="16">
    <div nz-col nzSpan="1" style="width: 86px;">
        <label class="line-height-32-prefix">任务单：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入任务单" [(ngModel)]="txtTaskCode" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">销售单：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入销售单" [(ngModel)]="txtSaleCode" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">产品编码：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入产品编码" [(ngModel)]="txtMaterialCode" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">产品批次：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入产品批次" [(ngModel)]="txtMaterialBatch" />
    </div>
</div>
<div nz-row nzGutter="16" class="margin-top-16">
    <div nz-col nzSpan="1" style="width: 86px;">
        <label class="line-height-32-prefix">箱号：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入箱号" [(ngModel)]="txtBoxNum" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">装箱类型：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入装箱类型" [(ngModel)]="txtBoxType" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">装箱人：</label>
    </div>
    <div nz-col nzSpan="4">
        <input nz-input appHotSearch (hotSearchEmit)="getBoxingDetailsNoDeal()" placeholder="请输入装箱人" [(ngModel)]="txtBoxPerson" />
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">装箱时间：</label>
    </div>
    <div nz-col nzSpan="4">
        <nz-range-picker nzDropdownClassName="date-range" ngModel (ngModelChange)="onBoxDateChange($event)">
        </nz-range-picker>
    </div>
</div>
<div nz-row nzGutter="16" class="margin-top-16">
    <button nz-button nzType="primary" class="margin-left-16" (click)="putConfirmdetail();" *ngIf="boxingDetailRoles.edit">挑库确认</button>
    <button nz-button nzType="primary" class="margin-left-16">打印装箱单</button>
    <button nz-button nzType="primary" class="margin-left-16">取消</button>
    <button nz-button nzType="primary" class="margin-left-16">修改</button>
</div>
<div nz-row class="margin-top-16">
    <nz-table #listTable nzTitle="装箱单列表" nzBordered [nzData]="listData" [nzFrontPagination]="false"  nzSize="small">
        <thead>
            <tr>
                <th colspan="1">选择</th>
                <th>装箱单编号</th>
                <th>产品编号</th>
                <th>箱号</th>
                <th>桶数</th>
                <th>重量kg</th>
                <th>装箱类型</th>
                <th>装箱人</th>
                <th>装箱时间</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of listTable.data">
                <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="checkBoxDetailSingle(data)">
                </td>
                <td>{{ data.boxcode }}</td>
                <td>{{ data.materialCode }}</td>
                <td>{{ data.boxnum }}</td>
                <td>{{ data.bucketnum }}</td>
                <td>{{ data.weight }}</td>
                <td>{{ data.boxtype }}</td>
                <td>{{ data.boxperson }}</td>
                <td>{{ data.boxdate }}</td>
            </tr>
        </tbody>
    </nz-table>
    <div nz-row *ngIf="listData.length!=0" class="margin-top-16">
        <nz-pagination class="float-right" (nzPageIndexChange)="clickPage($event)" [(nzPageIndex)]="pageIndex" [nzTotal]="totalSize" [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
    </div>
</div>
<div nz-row class="margin-top-16">
    <nz-table #detailListTable nzTitle="装箱单详细信息" nzBordered [nzData]="detailListData" [nzFrontPagination]="false"  nzSize="small">
        <thead>
            <tr>
                <th>桶编号</th>
                <th>桶重kg</th>
                <!-- <th>产品编号</th>
                <th>产品名称</th> -->
                <th>产品批次</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of detailListTable.data">
                <td>{{ data.bucketnum }}</td>
                <td>{{ data.weight }}</td>
                <!-- <td>{{ data.id }}</td>
                <td>{{ data.id }}</td> -->
                <td>{{ data.productBatch }}</td>
            </tr>
        </tbody>
    </nz-table>
    <div nz-row *ngIf="detailListData.length!=0" class="margin-top-16">
        <nz-pagination class="float-right" (nzPageIndexChange)="detailClickPage($event)" [(nzPageIndex)]="detailPageIndex" [nzTotal]="detailTotalSize" [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 {{detailTotalSize}} 条 </ng-template>
    </div>
</div>
<nz-modal [(nzVisible)]="isShowBox1" nzTitle="友情提示" (nzOnCancel)="cancelBox1()" (nzOnOk)="okBox1()">
    <p>确定要执行挑库确认么？</p>
</nz-modal>